<template>
  <div class="container">
    <!--可以在这个地方写你自己的html-->
    <!--这个按钮相当于触发下一个组件（在html中应该叫div）的入口，点击这个事件，那么将新增下一个div-->
    <a-button @click="add()">新增node</a-button>
  </div>
</template>

<script>
import '@antv/x6-vue-shape'
import OtherNode from '@/views/vso/components/OtherNode'
export default {
  name: 'ChangeSize',
  props: {
    size: {
      type: Number,
      default: null,
      required: false
    }
  },
  inject: ['getNode', 'getGraph'],
  methods: {
    add () {
      const self = this
      const graph = this.getGraph()
      const otherNode = graph.addNode({
        shape: 'vue-shape',
        // 注意调整一下坐标
        x: 10,
        y: 10,
        width: 150,
        height: 100,
        attrs: {
          body: {
            stroke: '#ebebeb'
          }
        },
        component: {
          template: '<other-node :pnode="node"></other-node>',
          data: {
            node: self.getNode()
          },
          components: {
            OtherNode
          }
        }
      })
      graph.addEdge({
        source: { cell: this.getNode().id },
        target: { cell: otherNode.id }
      })
    }
  }
}
</script>
<style scoped>
.container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
